<template>
  <!-- 点击用户头像时触发显示页面，“我的收藏”菜单项显示内容 -->
  <div id="user-center-myCollection-contrainer">
    <el-row id="user-center-accountSettings-myCollection-contrainer-header">
      <span> 我的收藏 </span>
    </el-row>
    <el-divider />
    <el-row
      id="user-center-accountSettings-myCollection-contrainer-main"
      v-for="(articleBrief, index) in articleBriefs"
      :key="index"
    >
      <el-col :lg="6"
        ><el-image
          :src="
            articleBrief.picUrl
          "
      /></el-col>
      <el-col :lg="17">
        <div
          id="user-center-accountSettings-myCollection-contrainer-main-title"
        >
          <span
            ><strong>{{ articleBrief.title }}</strong></span
          >
        </div>
        <div
          id="user-center-accountSettings-myCollection-contrainer-main-content"
        >
          <el-avatar
            :size="24"
            :src="articleBrief.avatar"
          />
          <span>{{ articleBrief.author }}</span>
          <span
            >&ensp;<i class="el-icon-view" />浏览&ensp;{{
              articleBrief.glanceNum
            }}</span
          >
          <span
            >&ensp;<i class="el-icon-chat-dot-round" />评论&ensp;{{
              articleBrief.commentNum
            }}</span
          >
          <span
            >&ensp;<i class="el-icon-star-off" />收藏数&ensp;{{
              articleBrief.collectNum
            }}</span
          >
          <span>&ensp;{{ articleBrief.issueTime }}</span>
          <span><i class="el-icon-close" @click="removeDataById(articleBrief.id)"/></span>
        </div>
      </el-col>
    </el-row>
    <el-pagination
      layout="prev, pager, next"
      :current-page="page"
      :page-size="limit"
      :total="total"
      @current-change="getPageList"
    ></el-pagination>
  </div>
</template>
<script>
import { queryArticleCollectionVO,delCollection } from "@/api/article/MyCollection";

export default {
  name: "myCollection",
  data() {
    return {
      articleBriefs: [],
      page: 1, //当前页
      limit: 5, //每页记录数
      total: 0, //总记录数
    };
  },
  created() {
    this.getPageList();
  },
  methods: {
    //分页查询收藏文章
    getPageList(page = 1) {
      this.page = page;
      queryArticleCollectionVO(this.page, this.limit).then((response) => {
        this.articleBriefs = response.data.data.records;
        this.total = response.data.data.total;
      });
    },
    removeDataById(id) {
      delCollection(id).then((response) => {
        this.$message({
          type: "success",
          message: "移除收藏成功!",
        });
        this.getPageList();
      });
    },
  },
};
</script>
<style>
#user-center-accountSettings-myCollection-contrainer-main-title span {
  cursor: pointer;
  font-size: 24px;
}
#user-center-accountSettings-myCollection-contrainer-main-title {
  margin-top: 2%;
}
#user-center-accountSettings-myCollection-contrainer-main-content
  > span:last-child {
  display: inline-block;
  margin-top: 1%;
  /* float: right; */
  cursor: pointer;
}
#user-center-accountSettings-myCollection-contrainer-main-content .el-avatar {
  vertical-align: bottom;
}
#user-center-accountSettings-myCollection-contrainer-main-content {
  margin-top: 6%;
  font-size: 14px;
  color: #909399;
}
#user-center-accountSettings-myCollection-contrainer-main
  > .el-col:first-child
  .el-image {
  height: 120px;
}
#user-center-accountSettings-myCollection-contrainer-main > .el-col:last-child {
  margin-left: 2%;
}
#user-center-accountSettings-myCollection-contrainer-main {
  margin: 3% auto;
  width: 94%;
  height: 120px;
  -webkit-box-shadow: 0px 3px 3px #c8c8c8;
  -moz-box-shadow: 0px 3px 3px #c8c8c8;
  box-shadow: 0px 3px 3px #c8c8c8;
}
#user-center-accountSettings-myCollection-contrainer-header {
  font-size: 22px;
  height: 32px;
  line-height: 32px;
}
</style>